<template>
  <div class="wrapper">
    <img class="wrapper_img" src="http://www.dell-lee.com/imgs/vue3/user.png"/>
    <div class="wrapper_input">
      <input class="wrapper_input_content" placeholder="请输入手机号" v-model="username"/>
    </div>
    <div class="wrapper_input">
      <input class="wrapper_input_content" placeholder="请输入密码" type="password" v-model="password"
             autocomplete="new-password"/>
    </div>
    <div class="wrapper_login-button" @click="handleLogin">登录</div>
    <div class="wrapper_login-link" @click="handleRegister">立即注册</div>
    <div class="wrapper_login-findpassword">忘记密码</div>
    <Toast v-if="show" :message="toastMessage"/>
  </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { reactive, toRefs } from 'vue'
import { post } from '@/utils/request'
import Toast, { useToastEffect } from '../../components/Toast'

const useLoginEffect = (showToast) => {
  const router = useRouter()
  const data = reactive({
    username: '',
    password: ''
  })
  const handleLogin = async () => {
    try {
      const result = await post('/api/user/login', {
        username: data.username,
        password: data.password
      })
      if (result?.code === 2000) {
        localStorage.isLogin = true
        router.push({ name: 'Home' })
      } else {
        showToast('登录失败！')
      }
    } catch (e) {
      showToast('请求失败！')
    }
  }
  const { username, password } = toRefs(data)
  return {
    username,
    password,
    handleLogin
  }
}
const handleRegisterClick = () => {
  const router = useRouter()
  const handleRegister = () => {
    router.push({ name: 'Register' })
  }
  return { handleRegister }
}

export default {
  name: 'Login',
  components: { Toast },
  // 职责执行清晰的描述代码执行的流程
  setup () {
    const { show, toastMessage, showToast } = useToastEffect()
    const { username, password, handleLogin } = useLoginEffect(showToast)
    const { handleRegister } = handleRegisterClick()

    return {
      handleLogin,
      handleRegister,
      username,
      password,
      show,
      toastMessage
    }
  }
}

</script>
<style lang="scss" scoped>
@import "../../style/viriables";

.wrapper {
  position: absolute;
  top: 50%;
  bottom: -6%;
  left: 0;
  right: 0;
  transform: translateY(-50%);

  &_img {
    display: block;
    margin: 0 auto .4rem auto;
    width: .66rem;
    height: .66rem;
  }

  &_input {
    box-sizing: border-box;
    height: .48rem;
    margin: 0 .16rem .4rem .16rem;
    background: #F9F9F9;
    padding: 0 .16rem;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 6px;

    &_content {
      width: 100%;
      line-height: .48rem;
      border: none;
      outline: none;
      background: none;
      font-size: .16rem;
      color: $content-notice-fontcolor;

      ::placeholder {
        color: $content-notice-fontcolor;
      }
    }
  }

  &_login-button {
    margin: .32rem .4rem .14rem .4rem;
    line-height: .48rem;
    background: #0091FF;
    background: #0091FF;
    box-shadow: 0 .04rem .08rem 0 rgba(0, 145, 255, 0.32);
    border-radius: .04rem;
    border-radius: .04rem;
    color: $bgColor;
    font-size: .16rem;
    text-align: center;
  }

  &_login-link {
    width: 60%;
    font-size: .14rem;
    color: $content-notice-fontcolor;
    text-align: center;
  }

  &_login-findpassword {
    margin-top: -.16rem;
    margin-left: 40%;
    width: 50%;
    font-size: .14rem;
    color: $content-notice-fontcolor;
    text-align: center;
  }
}
</style>
